<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="message">
    <link rel="stylesheet" href="/statics/css/message.min.css">
    <script src="/statics/js/message.js"></script>
    <div class="message-icon">
        <img src="../statics/images/about-us/message.png" alt="">
    </div>
    <div class="message am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 300}">
        <div class="title">留言板 <span>Message Board </span><i class="iconfont icon-jianshao minue-icon"></i></div>
        <div class="message-box">
            <div class="message-content">
                <textarea rows="2" cols="20" id="content" placeholder="留言内容 / Message Contents" class="message-placeholder"></textarea>
            </div>
            <div class="message-tel">
                <input type="input" id="name" placeholder="姓名 / Name" class="message-placeholder"/>
                <i class="iconfont icon-zhenshixingming"></i>
            </div>
            <div class="message-tel">
                <input type="number" id="tel" placeholder="联系电话 / Tel" class="message-placeholder"/>
                <i class="iconfont icon-dianhua"></i>
            </div>
            <div class="message-tel">
                <input type="input" id="email" placeholder="邮箱 / Email" class="message-placeholder"/>
                <i class="iconfont icon-youxiang1"></i>
            </div>
            <div class="message-tel">
                <input type="input" id="address" placeholder="地址 / Address" class="message-placeholder"/>
                <i class="iconfont icon-dizhi1"></i>
            </div>
            <div class="submit">
                <input type="button" value="发送/Send" id="send_message"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function (){
            $('#send_message').click(function (){
                var content = $("#content");
                var name = $("#name");
                var tel = $("#tel");
                var email = $("#email");
                var address = $("#address");
                if($.trim(content.val()) == ''){
                    alert('请输入内容');
                    content.focus();
                    return false;
                } else if($.trim(name.val()) == ''){
                    alert('请输入名字');
                    name.focus();
                    return false;
                } else if($.trim(tel.val()) == ''){
                    alert('请输入电话');
                    tel.focus();
                    return false;
                } else if($.trim(email.val()) == ''){
                    alert('请输入邮箱');
                    email.focus();
                    return false;
                } else if($.trim(address.val()) == ''){
                    alert('请输入地址');
                    address.focus();
                    return false;
                }
                $.post('/saveMessage', {
                    'content': content.val(),
                    'name': name.val(),
                    'tel': tel.val(),
                    'email': email.val(),
                    'address': address.val()
                }, function(resp){
                    VtMessage.success({
                        duration: 2000,
                        content: resp.message,
                        offset: 'vt-top-center vt-fixed'
                    })
                })
            })
        })
    </script>
</th:block>